<!--
 * @Description: 
 * @Author: wuwl
 * @Date: 2024-05-13 17:23:10
 * @FilePath: \vue-pdf2\src\views\pageJs\index.vue
 * @LastEditTime: 2024-06-18 10:19:41
 * @LastEditors: WWL
-->
<template>
  <div>
    <el-button type="primary" @click="pageHandler">转成</el-button>
    <div class="pdf_js_container">
      <div class="headerLeft" />
      <div class="headerCenter">PDF页头/标题</div>
      <div class="headerRight" />

      <div class="footerLeft" />
      <div class="footerCenter" />
      <div class="footerRight" />
      <!-- <ul class="long_content_list">
      <li v-for="(_, i) in Array(24).fill('')" :key="i">
        {{ `我是列表${i + 1}` }}
      </li>
    </ul> -->
      <div class="long_content_list">
        <EleTable class="pdf-group"></EleTable>
        <ImageComponent></ImageComponent>
        <ChartComponent></ChartComponent>
        <RichText></RichText>
        <pdfWord></pdfWord>
      </div>
    </div>
  </div>
</template>

<script>
import { Previewer } from "pagedjs";
import TableComponent from "../../components/tableComponent.vue";
import ImageComponent from "../../components/ImageComponent.vue";
import RichText from "../../components/richText.vue";
import EleTable from "../../components/table.vue";
import ChartComponent from "../../components/echartComponent.vue";
import pdfWord from "../../components/pdfWord.vue";
export default {
  name: "PagedJs",

  components: {
    TableComponent,
    TableComponent,
    ImageComponent,
    RichText,
    pdfWord,
    EleTable,
    ChartComponent,
  },
  mounted() {},
  methods: {
    pageHandler() {
      // 执行pagedjs的插件方法
      const paged = new Previewer();
      paged.preview().then((flow) => {
        console.log("Rendered", flow.total, "pages.");
        // window.print();
      });
    },
  },
};
</script>

<style lang="less">
@import "./index.less";
</style>
